<img src="/assets/img/hair.png" xmlns="http://www.w3.org/1999/html" style="height:3vh;width: 100vw">
<div class="page">
  <div class="c-info">
    <div style="display:flex;justify-content: space-between">
      <button class="c-top-bt">奖品列表</button>
      <button class="c-top-bt">活动规则</button>
    </div>
    <div style="text-align: center;color: var(--text-color);">
      <h4>{{prize?.prizeName}}</h4>
    </div>
    <div style="flex-shrink:2">
      <img class="li" src="/assets/img/59dc597c2ebac.png">
    </div>
    <div *ngIf="current" class="c-award-user" style="flex-shrink:1">
      <div>
        <img class="headimg" src="{{userInfos[current-1].headimgurl}}">
        <p>{{userInfos[current-1].nickname}}</p>
      </div>
      <div>
        <img class="headimg" src="{{userInfos[current].headimgurl}}">
        <p>{{userInfos[current].nickname}}</p>
      </div>
      <div>
        <img class="headimg" src="{{userInfos[current+1].headimgurl}}">
        <p>{{userInfos[current+1].nickname}}</p>
      </div>
    </div>
    <div>
      <button id="start-award" (click)="start()">{{interval?'停止抽奖':'开始抽奖'}}</button>
    </div>
  </div>
  <div class="c-rst">
    <div *ngFor="let lucker of this.luckUsers" style="display: flex;align-items:center;">
      <div style="width:100px;padding:10px;">
        <img class="headimg" src="{{lucker.headimgurl}}" >
      </div>
      <div>
        <p style="font-size:200%">恭喜用户【{{lucker.nickname}}】喜中{{prize.prizeName}}</p>
      </div>
    </div>
  </div>

</div>
<!--<div class="box">-->
  <!--<div style="height:92vh;display:flex;flex-direction:column;">-->

    <!--<div>-->
      <!--<button class="an0">奖品列表</button>-->
      <!--<button class="an1">活动规则</button>-->
    <!--</div>-->
    <!--<div *ngIf="this.luckUsers.length !=5;else awardEnd">-->
      <!--<div style="text-align: center;color: var(&#45;&#45;text-color);">-->
        <!--<h4>{{prize?.prizeName}}</h4>-->
      <!--</div>-->


      <!--&lt;!&ndash;<div style="width:30vw" width="100%">&ndash;&gt;-->
      <!--&lt;!&ndash;<img src="{{userInfos[current-2].headimgurl}}">&ndash;&gt;-->
      <!--&lt;!&ndash;<p>{{userInfos[current-2].nickname}}</p>&ndash;&gt;-->
      <!--&lt;!&ndash;</div>&ndash;&gt;-->


      <!--&lt;!&ndash;<div  style="width:30vw">&ndash;&gt;-->
      <!--&lt;!&ndash;<img src="{{userInfos[current+2].headimgurl}}">&ndash;&gt;-->
      <!--&lt;!&ndash;<p>{{userInfos[current+2].nickname}}</p>&ndash;&gt;-->
      <!--&lt;!&ndash;</div>&ndash;&gt;-->

      <!--<div>-->
        <!--<img class="li" src="/assets/img/59dc597c2ebac.png">-->
      <!--</div>-->
      <!--&lt;!&ndash;<div class="heading-box" style="flex-direction: column" *ngIf="winner">&ndash;&gt;-->
      <!--&lt;!&ndash;<div><img class="headimg" src="{{winner.headimgurl}}"/></div>&ndash;&gt;-->
      <!--&lt;!&ndash;<div><p>{{winner.nickname}}</p></div>&ndash;&gt;-->
      <!--&lt;!&ndash;</div>&ndash;&gt;-->
      <!--<div>-->
        <!--<button id="start-award" (click)="start()">{{interval?'停止抽奖':'开始抽奖'}}</button>-->
      <!--</div>-->
    <!--</div>-->

    <!--<div *ngIf="current" class="c-award-user" style="height: 200px">-->
      <!--<div>-->
        <!--<img class="headimg" src="{{userInfos[current-1].headimgurl}}">-->
        <!--<p>{{userInfos[current-1].nickname}}</p>-->
      <!--</div>-->
      <!--<div>-->
        <!--<img class="headimg" src="{{userInfos[current].headimgurl}}">-->
        <!--<p>{{userInfos[current].nickname}}</p>-->
      <!--</div>-->
      <!--<div>-->
        <!--<img class="headimg" src="{{userInfos[current+1].headimgurl}}">-->
        <!--<p>{{userInfos[current+1].nickname}}</p>-->
      <!--</div>-->
    <!--</div>-->
  <!--</div>-->

  <!--<div class="c-award-user" style="flex-direction: column">-->
    <!--<div>-->
      <!--<h3>本轮抽奖的全部幸运观众:</h3>-->
    <!--</div>-->
    <!--<div class="luck-uers" style="display: flex;flex-wrap:wrap;margin: 15px 0">-->

      <!--<div *ngFor="let lucker of this.luckUsers" style="display: flex">-->
        <!--<div class="heading-box" style="flex-direction: column">-->
          <!--<img class="headimg" src="{{lucker.headimgurl}}">-->
          <!--<p>{{lucker.nickname}}</p>-->
        <!--</div>-->
      <!--</div>-->
    <!--</div>-->

  <!--</div>-->


<ng-template  #awardEnd >
  <div style="display: flex;flex-direction: column;justify-content: center;padding: 10px 2px;margin: 50px 0px">
    <h1>本轮抽奖已经结束,没中奖的朋友再接再厉!<span style="font-size: 110%">(๑•̀ㅂ•́)و✧</span></h1>
    <button class="nav-btn" (click)="navBackUp()">点这里。。嘤嘤嘤!<span style="font-size:110%">(￣ε(#￣)☆╰╮o(￣皿￣///)</span>少废话快返回去!重选一轮再开奖!</button>
  </div>
</ng-template>
